{% stylesheet %}
.block_comment .block_comment_list ul {
  display: grid;
  row-gap: 60px;
  column-gap: 60px;
  grid-template-columns: repeat(3, calc(33.333% - 40px));
}

.block_comment .block_comment_list li {
  text-align: center;
  list-style-type: none;
  overflow: hidden;
}

.block_comment .block_comment_list li .block_comment_list_svg {
  margin-bottom: 30px;
}

.block_comment .block_comment_list li .block_comment_list_star {
  margin-bottom: 30px;
  height: 16px;
}

.block_comment .block_comment_list li .block_comment_list_star svg + .block_comment .block_comment_list li .block_comment_list_star svg {
  margin-left: 4px;
}

.block_comment .block_comment_list li .block_comment_list_content {
  margin-bottom: 10px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--detail_color);
}

.block_comment .block_comment_list li .block_comment_list_time {
  color: var(--detail_color);
  margin-bottom: 10px;
}

.block_comment .block_comment_list li .block_comment_list_author {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block_comment .block_comment_list li .block_comment_list_author img {
  width: 20px;
  margin-right: 5px;
}

.block_comment .block_comment_more {
  text-align: center;
  margin-top: calc(var(--general_layout_spacing) * 0.5);
}

.block_comment .block_comment_more a {
  margin-top: 0;
}

@media (max-width: 767px) {
  .block_comment .block_comment_list ul {
    display: block;
  }
  .block_comment .block_comment_list li {
    margin-bottom: 60px;
  }
  .block_comment .block_comment_list li .block_comment_list_star {
    margin-bottom: 20px;
  }
  .block_comment .block_comment_list li .block_comment_list_svg {
    margin-bottom: 20px;
    height: 24px;
  }
}

{% endstylesheet %}

{% if theme_preview == '1' or storeConfig.comments_status == '1' %}

{% assign score_uncheck_color = theme_config.global.product_score_uncheck_color | default:'#bbbbbb' %}
{% assign score_selected_color = theme_config.global.product_score_selected_color | default:'#F8AD6B' %}
<div class="block_comment">
    <div class="container_wrapper">
				{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

        <div class="block_comment_list">
            <ul style=" grid-template-columns: repeat({{ section.settings.row  }}, 1fr);">
                {% get_comments sort_order=id star={section.settings.level} sort_type={ section.settings.time } limit={section.settings.num}  %}
                {% if comments %}
                {% for comment in comments %}
                <li>
                    <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                    <div class="block_comment_list_star">
											
                        {% for index in (1..5) %}
                        {% if index <= comment.star %}
							          {% include "icon_block_star" , width:"16",height:"16",color:score_selected_color %}
                        {% else %}
							          {% include "icon_block_star" , width:"16",height:"16",color: score_uncheck_color %}
                        {% endif %}                        
                        
                        {% endfor %}
                    </div>

                    <div class="block_comment_list_content">
                        {{ comment.content }}
                    </div>
                    {% if comment.created_at != "" %}
                    <div class="block_comment_list_time"><span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">{{comment.created_at | date: "%Y-%m-%d"}}</span></div>
                    {% endif %}
                    <div class="block_comment_list_author"><img src="{{ comment.national_flag }}" /> {{ comment.customer_name }}</div>
                </li>
                {% endfor %}
                
                {% else %}
									{% for index in (1..3) %}
                  <li>
                    <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                    <div class="block_comment_list_star">
												{% for index in (1..5) %}
							          {% include "icon_block_star" , width:"16",height:"16",color: score_selected_color %}
                        {% endfor %}
                    </div>
                    <div class="block_comment_list_content">
                        Add customer reviews and testimonials to showcase your store’s happy customers.
                    </div>
                    <div class="block_comment_list_author">— Author's name</div>
                  </li>
									{% endfor %}

                {% endif %}
            </ul>
        </div>
        {% if section.settings.more_text != ""%}
        <div class="block_comment_more"><a class="secondary_btn" href="/comments">{{ section.settings.more_text }}</a></div>
        {% endif %}
    </div>
</div>

{% endif %}


{% schema %}
{
	"tag": "section",
	"class": "block_comment",
	"is_global": false,
	"name": {
		"zh_CN": "文字评论",
		"en_US": "Text Comments"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Comment"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "Comment Detail"
		},
		{
			"type": "card_slider",
			"id": "row",
			"max": "6",
			"min": "3",
			"label": {
				"zh_CN": "pc每排数量",
				"en_US": "PC number per row"
			},
			"default": "4"
		},
		{
			"type": "card_slider",
			"id": "num",
			"max": "20",
			"min": "2",
			"label": {
				"zh_CN": "评论总数",
				"en_US": "Total number of comments"
			},
			"default": "8"
		},
		{
			"type": "card_select",
			"id": "time",
			"label": {
				"zh_CN": "评论时间",
				"en_US": "Comment time"
			},
			"option": [
				{
					"label": {
						"zh_CN": "最新评论",
						"en_US": "Latest Comments"
					},
					"value": "desc"
				},
				{
					"label": {
						"zh_CN": "最早评论",
						"en_US": "First comment"
					},
					"value": "asc"
				}
			],
			"default": "asc"
		},
		{
			"type": "card_select",
			"id": "level",
			"label": {
				"zh_CN": "评论星级",
				"en_US": "Review stars"
			},
			"option": [
				{
					"label": {
						"zh_CN": "五星",
						"en_US": "Five stars"
					},
					"value": "5"
				},
				{
					"label": {
						"zh_CN": "四星及以上",
						"en_US": "Four stars and above"
					},
					"value": "4"
				},
				{
					"label": {
						"zh_CN": "三星及以上",
						"en_US": "Three stars and above"
					},
					"value": "3"
				},
				{
					"label": {
						"zh_CN": "二星及以上",
						"en_US": "Two stars or above"
					},
					"value": "2"
				},
				{
					"label": {
						"zh_CN": "一星及以上",
						"en_US": "One star or above"
					},
					"value": "1"
				}
			],
			"default": "4"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Customer Reviews",
			"detail": "",
			"row": "3",
			"num": "6",
			"time": "asc",
			"level": "4",
			"more_text": "View More"
		},
		"blocks": []
	},
	"icon": "icon-wenzipinglun"
}
{% endschema %}